<#assign ctx = request.contextPath />
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 ,minimum-scale=1.0 ,maximum-scale=1.0" user-scalable=no>
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>我要租车</title>
    <link href="${ctx}/assets/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="${ctx}/assets/css/sco.message.css" />
    <link rel="stylesheet" href="${ctx}/assets/css/jquery.range.css" />
    <link rel="stylesheet" href="${ctx}/assets/css/datetimepicker.css">
    <style>
    	#selectCity_div {
		   	padding-top: 7px;
		    height:50px;
		    width:100%;
		    background:#369;
		    text-align:center;
	    } 
	    #price_param_div{
		    padding-top: 10px;
		    height:40px;
		    width:100%;
		    background:#E5E5E5;
		    text-align:center;
	    }
	    #price_sort_div{
		    padding-top: 10px;
		    height:40px;
		    width:100%;
		    background:#C2C2C2;
		    text-align:center;
		    display:none;
	    }

	    #selectCity_div a{
	    	color:#fff;
	    }
	   .content_text{	
	   	padding-left:30px;
	   }
	   .content_text1{
	   	padding-left: 0px;
	   }
	   .content_text2{
	   	font-size: 16px;
	   }
	   .content_text3{
	   	margin-bottom: 0px;
	   }
	   .content_text4{
	   	font-size: 16px;
	   	color: #ff3e3e; 
	   	margin-bottom:0px ;
	   }
	   #selectParam_div {
	   	position: fixed;
	 	bottom:0px;
		width:100%;
		background: #f4f4f4;
		z-index:9;
		overflow:auto;
		display:none;
	   }
	   .selectParam_div_text1{
	   		margin-top: 10px;
	   }
	   .selectParam_div_text2{
			border-style: solid;
			border-width: 1px;
			border-color: rgb(187, 187, 187);
			border-radius: 6px;
			background-color: rgb(255, 255, 255);
			top: 20px;
			width: 100%;
			height: 45px;
			text-align: center;
			padding-top: 13px;
		}
 		.selectParam_div_text3{
 			border-style: solid;
			border-width: 1px;
			border-color: rgb(187, 187, 187);
			border-radius: 6px;
			background-color: rgb(255, 255, 255);
			top: 20px;
			width: 100%;
			height: 45px;
			text-align: center;
			padding-top: 13px;
 		}
 		.selectParam_div_text4{
 			padding-top: 10px;
 		}
 		.selectParam_div_text5{
 			padding-left:4px ; 
 			padding-right: 4px;
 			margin-top: 15px;
 		}

		.bottom_p{
			border-style: solid;
			border-width: 1px;
			border-color: rgb(187, 187, 187);
			border-radius: 6px;
			background-color: rgb(255, 255, 255);
			width: 100%;
			height: 50px;
			padding-top: 13px;
			padding-left: 20px;
		}
		.adw{
			width: 100%;
			height: 60px;
			border-style: solid;
			border-width: 1px;
		  	border-color: rgb(187, 187, 187);
			border-radius:4px ;
			padding: 5px 10px 5px 10px;
		}
		.adw p{
			color: #000000;
		}
 		#page{
 			height:45px;
 			margin-bottom:10px;
 		}
	</style>
  </head>
  <body>
	<div class="container-fluid">
		<div id="top" class="row">
        	<div id="selectCity_div" class="col-lg-12">
				<select id="selectCity_select" class="form-control">
					<option value="">选择城市</option>
			      	<#if citylist??>
		    			<#list citylist as cityMap>
		    				<optgroup label="${cityMap.get('cityZimu')}">
		    					<#list cityMap.get('citys') as city>
		    						<option value="${city}">${city}</option>
		    					</#list>
		    				</optgroup>
		    			</#list>
		    		</#if>
		    	</select>
        	</div>
        	<div id="price_param_div" class="col-xs-12">
        		<div class="col-xs-6" id="clickPriceSort"><img src="${ctx}/assets/img/jiage_desc.png" width="20px" height="10px"/>&nbsp;价格</div>
        		<div class="col-xs-6" id="showParam"><img src="${ctx}/assets/img/saixuan.png" width="18px" height="14px"/>&nbsp;筛选</div>
        	</div>
        	<div id="price_sort_div" class="col-xs-12">
        		<div class="col-xs-6">
				  <label>
				  	<input type="radio" value="0" name="priceSort" checked />
				  	价格从低到高
				  </label>
        		</div>
        		<div class="col-xs-6">
				  <label>
				  	<input type="radio" value="1" name="priceSort" />
				  	价格从高到低
				  </label>
        		</div>
        	</div>
        </div>
        
		<div id="content" class="row col-lg-13">
			<div class="list-group">
				
			</div>
        </div>
        
        <div class="row">
        	<div id="selectParam_div" class="col-xs-12">
				<div class="col-xs-12"style="padding: 10px 0px 0px 0px;">
					<div class="col-xs-6" style="padding-left: 0px;">
						<a id="close_panel" href="javascript:;"><img width="24px" height="24px" src="${ctx}/assets/img/circle-delete.png" /></a>
					</div>
					<div class="col-xs-6 " style="padding-right: 0px;">
						<a id="start_search" href="javascript:;"><img width="24px" height="24px" style="float: right;" src="${ctx}/assets/img/circle-ok.png" /></a>
					</div>
				</div>
				<div class="row">
			        <div class="col-xs-12">
			        	<p class="text-left selectParam_div_text1"><strong>价格区域</strong></p>
			        </div>
			    </div>
			    <div class="row">
					<div class="col-xs-12">
			        	<div style="height: 30px;">
			        		<center>
				        		<input class="range-slider" type="hidden" value="0,1200"/>
				        	</center>
			        	</div>
			        </div>
			    </div>
			    
			    <div class="row">
			        <div class="col-xs-12" style="margin-top: 20px;">
				        <div class="col-xs-6">
				        	<div class="selectParam_div_text2">
				        		<label class="checkbox-inline">
									<input type="checkbox" name="transmissionAT" value="0"> 自动挡
								</label>
				        	</div>
				        </div>
				        <div class="col-xs-6">
				        	<div class="selectParam_div_text3">
				        		<label class="checkbox-inline">
									<input type="checkbox" name="transmissionMT" value="1"> 手动挡
									</label>
				        		</div>
				        	</div>
				        </div>	
			        </div>
			        <div class="row">
			        	<div class="col-xs-12 selectParam_div_text4" >
			        		<#if carTypelist??>
			        			<#list carTypelist as carTypeMap>
						        	<a href="javascript:;" class="car_type" data-value="${carTypeMap.get('id')}">
						        		<div class="col-xs-4 selectParam_div_text5">
						        			<div class="adw">
							        			<img src="${ctx}/assets/img/jingji_icon.png" width="90%" height="70%"/>
							        			<p class="text-center">${carTypeMap.get('name')}</p>
						        			</div>
						        		</div>
						        	</a>
					        	</#list>
				        	</#if>
			        	</div>
			        </div>
			         
			        <div class="row">
			        	<div class="col-xs-12"style="padding: 15px;">
			        		<select id="selectBrand_select" class="form-control">
								<option value="">选择品牌</option>    	
							    <#if brandlist??>
					    			<#list brandlist as brandMap>
					    				<optgroup label="${brandMap.get('brandZimu')}">
					    					<#list brandMap.get('brands') as brand>
					    						<option value="${brand.id}">${brand.name?if_exists}</option>
					    					</#list>
					    				</optgroup>
					    			</#list>
					    		</#if>
							</select>
			        	</div>
			        </div>
        		</div>
        	</div>
        
		</div>
		
		<#--下单模态框-->
		<div class="modal fade xiadan_modal" tabindex="-1" role="dialog">
		  <div class="modal-dialog modal-lg">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="exampleModalLabel">租车下单</h4>
		      </div>
		      <div class="modal-body">
		        <form>
		          <input type="hidden" id="modal_carId" />
		          <div class="form-group">
		            <img id="modal_picture" width="100%" />
		          </div>
		          <div class="row">
		            <div class="col-xs-12"><h4><label class="control-label" id="modal_brandName"></label></h4></div>
		          </div>
		          <div class="row">
		          	<div class="col-xs-6" id="modal_type"></div>
		            <div class="col-xs-6 text-right" id="modal_xianxing"></div>
		          </div>
		          <div class="row">
		          	<div class="col-xs-6" id="modal_seating"></div>
		            <div class="col-xs-6 text-right content_text4"><strong id="modal_price"></strong></div>
		          </div>
		          <div class="form-group">
		            <label class="control-label">取车时间:</label>
		            <input type="text" class="form-control" id="qucheTime" readonly>
		          </div>
		          <div class="form-group">
		            <label class="control-label">换车时间:</label>
		            <input type="text" class="form-control" id="huancheTime" readonly>
		          </div>
		          <div class="form-group">
		            <input type="button" class="btn btn-primary btn-block" id="xiadan_ok" value="确认下单" />
		          </div>
		          <div class="form-group">
		            <input type="button" class="btn btn-default btn-block" data-dismiss="modal" value="关闭" />
		          </div>
		        </form>
		      </div>
		    </div>
		  </div>
		</div>
		<#--下单模态框-->
		
	<script type="text/javascript">
		window.daijia = {ctx:'${ctx}',week:'${week}',wxAppId:'${setting.wxAppId}',wxServer:'${setting.wxServer}'};
	</script>
    <script src="${ctx}/assets/js/jquery-1.11.0.min.js"></script>
    <script src="${ctx}/assets/js/bootstrap.min.js"></script>
	<script src="${ctx}/assets/js/sco.message.js"></script>
	<script src="${ctx}/assets/js/jquery.range.js"></script>
	<script src="${ctx}/assets/js/bootstrap-datetimepicker.min.js"></script>
	<script src="${ctx}/assets/js/bootstrap-datetimepicker.zh-CN.js"></script>
	<script src="${ctx}/assets/js/wxzuche.js" ></script>
  </body>
</html>
